{{ title = "Clade" }}
{{include "../layouts/header.view.html"}}

<div id="page-content">
  <div class="container">

    <nav aria-label="breadcrumb">
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{{routeUrl("phylogenies_index",{})}}">Phylogenies</a></li>
        <li class="breadcrumb-item"><a href="{{routeUrl("phylogenies_show",{phylotree: tree.getIdWithVersion()})}}">{{tree.name}} {{tree.version}}</a></li>
        {{if cluster != ""}}
        <li class="breadcrumb-item"><a href="{{routeUrl("groups_show",{phylotree: tree.getIdWithVersion(), label: cluster})}}">{{cluster}}</a></li>
        {{end}}
        <li class="breadcrumb-item active" aria-current="page">{{clade}}</li>
      </ol>
    </nav>

    <h1>Haplogroup {{clade}}</h1>

    <h4>Phylogenetic Tree</h4>

    <div id="graph" style="width: 100%; height: 252px; border: 1px; border-style: solid;">

</div>
<br>
  <h4>Mutations</h4>
    <p>This haplogroup is defined by the following <b> {{polymorphisms.size()}} mutations</b>:</p>
    <table class="table table-sm table-hover">
      <thead>
        <th>Mutation</th>
        <th>Ref</th>
        <th>Alt</th>
        {{for annotation in annotations}}
          {{for property in annotation.getProperties()}}
            {{if (property.isShow())}}
              <th>{{property.getName()}}</th>
            {{end}}
          {{end}}
        {{end}}
      </thead>
      <tbody>
        {{for polymorphism in polymorphisms}}
        <tr class="clickable-tr" data-href="{{routeUrl("mutations_with_clade_show", {phylotree:tree.getIdWithVersion(), pos:polymorphism.position, ref:polymorphism.ref, alt:polymorphism.alt, clade: clade})}}">
          <td style="width: 200px;">
            <span class="badge badge-info">{{polymorphism.nuc}}</span><br>
          </td>
          <td>
            {{polymorphism.ref}}
          </td>
          <td>
            {{polymorphism.alt}}
          </td>
          {{for annotation in annotations}}
            {{for property in annotation.getProperties()}}
              {{if (property.isShow())}}
                <td>{{polymorphism.getAnnotations().get(property.getColumn())}}</td>
              {{end}}
            {{end}}
          {{end}}
        </tr>
        {{end}}
      </tbody>
    </table>

  </div>
</div>

<script>
  {{include "show.view.js"}}
</script>

{{include "../layouts/footer.view.html"}}
